<template>
  <div>
<!--      <van-nav-bar-->
<!--          title="购物车"-->
<!--          left-arrow-->
<!--          @click-left="onClickLeft"-->
<!--      />-->
      <van-swipe-cell v-for="item in data.productItems" :key="item.id">
          <van-card class="card"
                    :price="item.price"
                    :desc="item.productDesc"
                    :title="item.name"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          >
              <template #thumb>
                  <div style="display: flex">
                      <van-checkbox v-model="checked"></van-checkbox>
                      <div class="van-image" style="width: 100%; height: 100%;">
                          <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
                      </div>
                  </div>
              </template>
              <template #num>
                  <van-stepper v-model="item.count" min="1" max="999" />
              </template>
          </van-card>
          <template #right>
              <van-button square text="删除" type="danger" class="delete-button" />
          </template>
      </van-swipe-cell>

      <van-submit-bar
          loading
          :price="3050"
          button-text="提交订单"
          @submit="onSubmit"
      >
          <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
  </div>
</template>

<script setup>

import {ref} from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()


const data = ref({
    productItems: [
        {
            icon: null,
            id: "1",
            name: "个人代理",
            price: 10000,
            productDesc: "购买一套服务费1万/年",
            count: 1
        }
    ]
})

const checked = ref(false)

const onSubmit = () => {

}

const onClickLeft = () => {
    router.push("/")
};

</script>

<style scoped lang="less">
.card {
    border-radius: .2rem;
    background: #fff;
    margin: .1rem .2rem
}

.van-submit-bar{
    bottom: var(--van-tabbar-height);
}

.delete-button{
  height: 100%;
}

</style>
